<template>
  <div class="dealer-team-reward">
    <c-title :text="info.plugin_name || '经销商团队奖励'"></c-title>
    <div class="head">
      <div class="img">
        <img :src="info.avatar" style="width: 100%; height: 100%;" alt="">
      </div>
      <div class="user">
        <p class="nickname">{{info.nickname}}</p>
        <p class="dealer" v-if="info.level_name">{{info.level_name}}</p>
      </div>
    </div>

    <div class="box" v-if="active == 0">
      <div class="box-left">
        <span class="money">{{ $i18n.t('money') }}{{info.wait}}</span>
        <span class="status mt10">未结算</span>
      </div>
      <div class="box-right">
        <span class="money">{{ $i18n.t('money') }}{{info.already}}</span>
        <span class="status mt10">已结算</span>
      </div>
      <div class="line"></div>
    </div>
    <div class="gross-amount" v-else>
      <span>剩余额度：</span>
      <span >{{info.amounts}}</span>
    </div>


    <van-tabs v-model="active"  @click="onClick">
      <van-tab title="奖励记录">
        <div class="status-list">
          <span v-for="(item, i) in status_list" :class="{ current_status: current_index == i }" :key="item"
            @click="toggle(i)">{{ item }}</span>
        </div>
        <div class="record-list">
          <div v-for="(item,index) in list" :key="item.id">
            <div class="record-list-head">
              <span>{{item.order_sn}}</span>
              <span>{{ $i18n.t('money') }}{{item.rewards_amounts}}</span>
            </div>
            <div class="record-list-center">
              <span>{{item.created_at}}</span>
              <span :class="{unsettled:item.status==0}">{{item.status_name}}</span>
            </div>
            <div class="record-list-line" :class="{fff:index+1==list.length}"></div>
          </div>
        </div>
      </van-tab>
      <van-tab title="额度记录">
        <div class="record-list pt21" >
          <div v-for="(item,index) in amounts_list"  :key="item.id">
            <div class="record-list-head">
              <span>{{item.type_name}}</span>
              <span :class="{unsettled:item.amounts>0}">{{ item.amounts>0?'+':'' }}{{ item.amounts }}</span>
            </div>
            <div class="record-list-center">{{item.created_at}}</div>
            <div class="record-list-line" :class="{fff:index+1==amounts_list.length}"></div>
          </div>
        </div></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
  mixins:[scrollMixin],
  data() {
    return {
      active: 0,
      status_list: ['全部', '未结算', '已结算', '已失效'],
      current_index: 0,
      info:{},
      amounts_list:[],

      list:[],
      page:1,
      total_page:1,
      isLoadMore:true,
    };
  },
  activated(){
    this.isLoadMore = true;
    this.get_rewards();
  },
  methods: {
    onClick(){
      if(this.active == 0){
          this.get_rewards()
      }else{
        this.get_amounts()
      }
    },
    async get_amounts(page=1){
      let {result,msg,data} =   await $http.post("plugin.distributor-team.frontend.controllers.amounts.index",{page},'loading');
      if(result){
        let {info,list} = data;
        this.info = info;
        (page==1)?(this.amounts_list = list.data):(this.amounts_list = this.amounts_list.concat(list.data))
        this.page = list.current_page;
        this.total_page = list.last_page;
        this.isLoadMore = true;
      }else{
        this.$toast(msg);
      }
    },
    async get_rewards(page=1){
      let json = {
        page,
        status:this.current_index
      }
      if(this.current_index == 0){
        json.status = 4;
      }
      let {result,msg,data} =   await $http.post("plugin.distributor-team.frontend.controllers.rewards.index",json,'loading');
      if(result){
        let {info,list} = data;
        this.info = info;
        (page==1)?(this.list = list.data):(this.list = this.list.concat(list.data))
        this.fun.setWXTitle(info.plugin_name)
        this.page = list.current_page;
        this.total_page = list.last_page;
        this.isLoadMore = true;
      }else{
        this.$toast(msg);
      }
    },
    getMoreData(){
      this.isLoadMore = false;
      if(this.page>=this.total_page){
        return;
      }
      let page = this.page + 1;
      if(this.active == 0){
        this.get_rewards(page)
      }else{
        this.get_amounts(page)
      }
    },
    toggle(i) {
      this.current_index = i;
      this.get_rewards();
    },
  }
};
</script>

<style scoped lang="scss">
.dealer-team-reward {
  .fff {
    background: #fff !important;
  }

  .pt21 {
    padding-top: 0.6563rem !important;
  }

  .gross-amount {
    text-align: left;
    background: #fff;
    padding: 0.75rem 0.9375rem;
    font-size: 0.8125rem;
    color: #333;
    margin-bottom: 0.75rem;
  }

  .unsettled {
    color: #fb6b68 !important;
  }

  .record-list {
    background: #fff;
    padding: 0 0.75rem;

    &-line {
      width: 100%;
      height: 1px;
      background: #e7e7e7;
      margin-bottom: 0.75rem;
    }

    &-center {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #999;
      margin-top: 0.5rem;
      margin-bottom: 0.75rem;
    }

    &-head {
      display: flex;
      justify-content: space-between;
      font-size: 0.8125rem;
      font-weight: bold;
    }
  }

  .status {
    font-size: 0.75rem;
    color: #999;
  }

  .current_status {
    background: #fb6b68 !important;
    color: #fff !important;
  }

  .status-list {
    display: flex;
    padding-top: 0.75rem;
    padding-left: 0.75rem;
    padding-bottom: 1.5rem;
    background: #fff;

    span {
      font-size: 0.75rem;
      background: #f5f5f5;
      color: #999;
      padding: 0.3125rem 0.75rem;
      border-radius: 100px;
      margin-right: 1.25rem;
    }
  }

  .mt10 {
    margin-top: 0.3125rem;
  }

  .money {
    font-size: 0.875rem;
    font-weight: bold;
  }

  .line {
    position: absolute;
    left: 50%;
    top: 50%;
    height: calc(100% - 1.5rem);
    background: #e7e7e7;
    width: 1px;
    transform: translate(-50%, -50%);
  }

  .box {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
  }

  .box-left,
  .box-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dealer {
    background: rgba(255, 255, 255, 0.39);
    font-size: 0.6875rem;
    border-radius: 100px;
    padding: 0.1875rem 0.75rem;
  }

  .nickname {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.5625rem;
  }

  .head {
    background: #fb6b68;
    display: flex;
    padding: 1.5rem 0.9375rem;
    align-items: center;
  }

  .user {
    color: #fff;
    text-align: left;
    margin-left: 0.375rem;
  }

  .img {
    width: 3.4375rem;
    height: 3.4375rem;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
